<template>
	<view class="" style="width: 100vw;height: 100vh">
	<!-- <view class="content" 
	style="min-height: 100vh"> -->
		<!-- <image class="bg" src="/static/login/log_bg.png" mode="scaleToFill"></image> -->
	<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
		<hx-navbar title="搜索结果" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden" transparent="auto"></hx-navbar>
		<view class="sticky">
			<view class="searchWrap ">
				<view class="searchBox">
					<image src="/static/index/icon_search.png" mode="scaleToFill" class="icon"></image>
					<input type="text" class="search_input" v-model="search_name" @confirm="search"
						placeholder="搜索版权、盲盒关键词" placeholder-class="color-6">
				</view>
			</view>
		</view>
		<view class="container">
			<view class="shop">
				<template v-for="(item, index) in list">
					<view class="item" :key="index" @tap="go_detail(item.id)">
						<view class="cover">
							<!-- 已售罄 -->
							<view class="status" v-if="item.status == 2">
								<image class="icon" src="/static/index/time-img.png" mode="scaleToFill"></image>
								<text>已售罄</text>
							</view>
							<!-- 未开始 -->
							<view class="star"v-if="item.status == 0">
								<image class="icon" src="/static/index/time-img1.png" mode="scaleToFill"></image>
								<!-- <xwCountDown :is-day="true" :tip-text="' '" :day-text="''" :hour-text="':'" :minute-text="':'"
									:second-text="''" :datatime="item.start_time_strto" @countDown="countDown($event,index)">
								</xwCountDown> -->
								<text>{{item.time}}</text>
							</view>
							<image :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="info">
							<view class="title">{{item.name}}</view>
							<view class="data">
								<view class="label" :style="{background:selStyle.onlyBackgournd}">限量</view>
								<view class="num">{{item.num}}份</view>
							</view>
							<view class="price">
								<text class="unit">￥</text>
								<text>{{item.price}}</text>
							</view>
						</view>
					</view>
				</template>
			</view>
			<view class="see_more normal_bg" v-if="hasNextPage" @tap="next_page">
				查看更多
			</view>
			<view class="no_more" v-else>没有更多了</view>
		</view>
	</view>
</view>
</template>

<script>
	import tabbarqn from '@/components/tabbarqn.vue'
	export default {
		components: {
			tabbarqn
		},
		data() {
			return {
				//选中样式 字体颜色 背景颜色
				selStyle:{
					 //单色背景颜色
					 onlyBackgournd:this.$store.state.onlyBackgournd
				},
				page: 1,
				limit: 10,
				list: [],
				hasNextPage: true,

				search_name: ''
			}
		},
		onLoad(options) {
			this.search_name = options.key
			this.get_data_list();

		},

		onPullDownRefresh() {
			this.get_data_list();
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 2000)
		},

		methods: {
			search: function() {
				let name = this.search_name;
				this.get_data_list()
			},

			go_detail: function(id) {
				uni.navigateTo({
					url: 'details?id=' + id
				})
			},

			get_data_list: function() {
				this.hasNextPage = true;
				this.list = []
				this.page = 1;

				let data = {
					page: this.page,
					limit: this.limit,
					keyword: this.search_name
				}
				this.$api.getIndexData(data, res => {
					if (res.status) {
						this.list = res.data;
						this.hasNextPage = res.data.length >= this.limit
					}
				})
			},


			next_page: function() {

				if (this.hasNextPage) {
					let new_page = this.page + 1;
					let data = {
						page: new_page,
						limit: this.limit,
						keyword: this.search_name
					}
					this.$api.getIndexData(data, res => {
						if (res.status) {
							this.list = this.list.concat(res.data);
							this.hasNextPage = res.data.length >= this.limit;
							this.page = new_page
						}
					})
				}
			},

		},
		onUpload() {}
	}
</script>

<style lang="scss">
	.sticky {
		width: 100%;
		position: relative;
		z-index: 2;
		.searchWrap {
			width: 100%;
			padding: 20rpx 40rpx;
			.searchBox {
				width: 100%;
				height: 80rpx;
				background-color: #fff;
				border-radius: 50rpx;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.icon {
					width: 29rpx;
					height: 31.75rpx;
				}
				.search_input {
					flex: 1;
					height: 80rpx;
					padding-left: 20rpx;
					font-size: 28rpx;
					color: #333;
				}
			}
		}
	}
	.container {
		width: 100%;
		padding: 0 40rpx;
		position: relative;
		z-index: 10;
	}
	.shop {
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		.item {
			width: 325rpx;
			height: 485rpx;
			border-radius: 10rpx;
			overflow: hidden;
			margin-top: 30rpx;
			.cover {
				width: 325rpx;
				height: 325rpx;
				position: relative;
				.status {
					width: 137rpx;
					height: 53rpx;
					background-color: rgba(0, 0, 0, .82);
					border-radius: 10rpx 0 10rpx 0;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
					.icon {
						width: 31rpx;
						height: 31rpx;
						display: block;
					}
					text {
						font-size: 22rpx;
						color: #fff;
						font-weight: 400;
						margin-left: 6rpx;
					}
				}
				.star {
					width: 100%;
					height: 47rpx;
					background-color: rgba(0, 0, 0, .82);
					padding: 0 12rpx;
					display: flex;
					align-items: center;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
					.icon {
						width: 29rpx;
						height: 29rpx;
						display: block;
					}
					text {
						font-size: 22rpx;
						color: #fff;
						font-weight: 400;
						margin-left: 11rpx;
					}
				}
				& > image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
			.info {
				width: 100%;
				height: 160rpx;
				background-color: #fff;
				padding: 11rpx 20rpx 0 13rpx;
				.title {
					font-size: 27rpx;
					color: #141519;
					font-weight: bold;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.data {
					margin: 13rpx 0;
				}
				.price {
					text-align: right;
					text {
						font-size: 34rpx;
						color: #141519;
						font-weight: bold;
					}
					text.unit {
						font-size: 14rpx;
						font-weight: 300;
					}
				}
			}
		}
		& > view:nth-child(-n+2) {
			margin-top: 0;
		}
	}
	.no_more {
		margin: 30rpx auto;
		font-size: 24rpx;
		color: #666;
		width: 100%;
		text-align: center;
	}
	.see_more {
		margin: 30rpx auto;
		width: 200rpx;
		height: 60rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-weight: bold;
		color: #000000;
	}
</style>